<template>
  <div class="publish-view">
    <!-- 发布标签页 -->
    <div class="publish-tabs">
      <div class="tabs-container">
        <div 
          v-for="tab in tabs" 
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="setActiveTab(tab.key)"
        >
          {{ tab.name }}
        </div>
      </div>
    </div>
    
    <!-- 上传区域 -->
    <div class="upload-area">
      <div class="upload-container">
        <div class="upload-icon">
          <el-icon><Upload /></el-icon>
        </div>
        
        <div class="upload-text">
          {{ getUploadText() }}
        </div>
        
        <el-button type="primary" class="upload-btn" @click="handleUpload">
          {{ getUploadButtonText() }}
        </el-button>
        
        <div class="upload-tips">
          <p>支持 {{ getSupportedFormats() }} 格式</p>
          <p>文件大小不超过 {{ getMaxFileSize() }}</p>
        </div>
      </div>
    </div>
    
    <!-- 发布表单 -->
    <div class="publish-form" v-if="showForm">
      <el-form :model="publishForm" :rules="formRules" ref="formRef" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="publishForm.title" placeholder="请输入标题" />
        </el-form-item>
        
        <el-form-item label="内容" prop="content">
          <el-input 
            v-model="publishForm.content" 
            type="textarea" 
            :rows="6"
            placeholder="分享你的想法..." 
          />
        </el-form-item>
        
        <el-form-item label="标签" prop="tags">
          <el-select
            v-model="publishForm.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择或输入标签"
          >
            <el-option
              v-for="tag in availableTags"
              :key="tag"
              :label="tag"
              :value="tag"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { usePostStore } from '@/store/post'

const postStore = usePostStore()

// 标签页数据
const tabs = ref([
  { key: 'video', name: '上传视频' },
  { key: 'image', name: '上传图文' },
  { key: 'article', name: '写长文' }
])

const activeTab = ref('video')
const showForm = ref(false)

// 发布表单数据
const publishForm = ref({
  title: '',
  content: '',
  tags: [],
  files: []
})

// 表单验证规则
const formRules = ref({
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
    { min: 1, max: 100, message: '标题长度在 1 到 100 个字符', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入内容', trigger: 'blur' },
    { min: 10, max: 2000, message: '内容长度在 10 到 2000 个字符', trigger: 'blur' }
  ],
  tags: [
    { required: true, message: '请选择标签', trigger: 'change' }
  ]
})

// 可用标签
const availableTags = ref([
  '穿搭', '美食', '彩妆', '影视', '职场', '情感', '家居', '游戏', '旅行', '健身'
])

// 设置活动标签页
const setActiveTab = (tabKey) => {
  activeTab.value = tabKey
  showForm.value = false
}

// 获取上传文本
const getUploadText = () => {
  switch (activeTab.value) {
    case 'video':
      return '拖拽视频到此或点击上传'
    case 'image':
      return '拖拽图片到此或点击上传'
    case 'article':
      return '开始创作你的长文'
    default:
      return '拖拽文件到此或点击上传'
  }
}

// 获取上传按钮文本
const getUploadButtonText = () => {
  switch (activeTab.value) {
    case 'video':
      return '上传视频'
    case 'image':
      return '上传图文'
    case 'article':
      return '开始创作'
    default:
      return '上传文件'
  }
}

// 获取支持格式
const getSupportedFormats = () => {
  switch (activeTab.value) {
    case 'video':
      return 'MP4、AVI、MOV、WMV、FLV'
    case 'image':
      return 'JPG、PNG、GIF、WEBP'
    case 'article':
      return '纯文本'
    default:
      return '多种格式'
  }
}

// 获取最大文件大小
const getMaxFileSize = () => {
  switch (activeTab.value) {
    case 'video':
      return '100MB'
    case 'image':
      return '10MB'
    case 'article':
      return '无限制'
    default:
      return '10MB'
  }
}

// 处理上传
const handleUpload = () => {
  if (activeTab.value === 'article') {
    showForm.value = true
  } else {
    // 触发文件选择
    const input = document.createElement('input')
    input.type = 'file'
    input.multiple = activeTab.value === 'image'
    input.accept = getAcceptTypes()
    
    input.onchange = (e) => {
      const files = Array.from(e.target.files)
      if (files.length > 0) {
        publishForm.value.files = files
        showForm.value = true
        ElMessage.success('文件上传成功，请填写发布信息')
      }
    }
    
    input.click()
  }
}

// 获取接受的文件类型
const getAcceptTypes = () => {
  switch (activeTab.value) {
    case 'video':
      return 'video/*'
    case 'image':
      return 'image/*'
    default:
      return '*/*'
  }
}

// 提交表单
const submitForm = async () => {
  try {
    const formData = {
      ...publishForm.value,
      type: activeTab.value
    }
    await postStore.publishPost(formData)
    ElMessage.success('发布成功！')
    resetForm()
  } catch (error) {
    ElMessage.error('发布失败，请重试')
  }
}

// 重置表单
const resetForm = () => {
  publishForm.value = {
    title: '',
    content: '',
    tags: [],
    files: []
  }
  showForm.value = false
}
</script>

<style lang="scss" scoped>
.publish-view {
  .publish-tabs {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .tabs-container {
      display: flex;
      gap: 40px;
      
      .tab-item {
        padding: 8px 0;
        cursor: pointer;
        font-size: 16px;
        color: #666;
        position: relative;
        transition: all 0.2s ease;
        
        &:hover {
          color: #333;
        }
        
        &.active {
          color: #ff2442;
          font-weight: 600;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #ff2442;
            border-radius: 1px;
          }
        }
      }
    }
  }
  
  .upload-area {
    background: white;
    border-radius: 12px;
    padding: 60px 40px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .upload-container {
      text-align: center;
      
      .upload-icon {
        margin-bottom: 24px;
        
        .el-icon {
          font-size: 80px;
          color: #d1d5db;
        }
      }
      
      .upload-text {
        font-size: 18px;
        color: #666;
        margin-bottom: 32px;
      }
      
      .upload-btn {
        background: #ff2442;
        border-color: #ff2442;
        border-radius: 24px;
        padding: 12px 32px;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 24px;
        
        &:hover {
          background: #e61e3a;
          border-color: #e61e3a;
        }
      }
      
      .upload-tips {
        color: #999;
        font-size: 14px;
        
        p {
          margin: 4px 0;
        }
      }
    }
  }
  
  .publish-form {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .el-form-item {
      margin-bottom: 24px;
    }
    
    .el-input,
    .el-textarea {
      .el-input__wrapper {
        border-radius: 8px;
      }
    }
    
    .el-select {
      width: 100%;
      
      .el-input__wrapper {
        border-radius: 8px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .publish-view {
    .publish-tabs {
      .tabs-container {
        gap: 24px;
        
        .tab-item {
          font-size: 14px;
        }
      }
    }
    
    .upload-area {
      padding: 40px 20px;
      
      .upload-container {
        .upload-icon .el-icon {
          font-size: 60px;
        }
        
        .upload-text {
          font-size: 16px;
        }
        
        .upload-btn {
          padding: 10px 24px;
          font-size: 14px;
        }
      }
    }
    
    .publish-form {
      padding: 20px;
    }
  }
}
</style>